<template>
  <div id="app">
    <h1 v-text="title"></h1>
    <h1 v-html="title"></h1>
    <input v-model="newItem" v-on:keyup.enter="addItem">
    <ul>
       <li v-for="item in items" v-bind:class="{finished: item.isFinished}" v-on:click="toggleFinish(item)">
         {{item.lable}}
       </li>
    </ul>
    <p>child tells me {{childWords}}</p>
    <component-a msgfromfather='you die!'
    v-on:chid-tell-me-something='listenToMyBoy'></component-a>
  </div>
</template>

<script>
import Store from './store.js'
import ComponentA from './components/commponentA'
export default {
  data () {
    return {
      title: '<h1>标签</h1>this is a todo list',
      items: Store.fetch(),
      newItem: '',
      childWords: ''
    }
  },
  watch: {
    items: {
      handler: function (val, oldVal) {
        console.log(val + oldVal)
        Store.save(val)
      },
      deep: true
    }
  },
  events: {
    'chid-tell-me-something': function (msg) {
      this.childWords = msg
    }
  },
  methods: {
    toggleFinish: function (item) {
      item.isFinished = !item.isFinished
    },
    addItem: function () {
      this.items.push({
        lable: this.newItem,
        isFinished: false
      })
      this.newItem = ''
      //  没作用
      this.$broadcast('onAddnew', '父组件传递过来的字符串')
      Store.save()
    },
    listenToMyBoy: function (msg) {
      this.childWords = msg
    }
  },
  components: {ComponentA}
}
</script>

<style>
.finished{
  text-decoration: underline;
}
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;s
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>
